﻿@model MVC.Models.ReadBook

<h2>Edit</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.ReadBookId)
        @Html.HiddenFor(model => model.BookListId)
        @Html.HiddenFor(model => model.Book.BookId)
        @Html.HiddenFor(model => model.Book.Creator)
        

        <div class="form-group">
            @Html.LabelFor(model => model.Book.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input class="bookInput" id="Title" name="Book.Title" type="text" value="@Model.Book.Title" />
                @Html.ValidationMessageFor(model => model.Book.Title)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Book.Author, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input class="bookInput" id="Author" name="Book.Author" type="text" value="@Model.Book.Author" />
                @Html.ValidationMessageFor(model => model.Book.Author)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Book.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <textarea class="bookInputArea" id="Description" name="Book.Description">@Model.Book.Description</textarea>
                @Html.ValidationMessageFor(model => model.Book.Description)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Book.Genre, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input class="bookInput" type="text" id="Genre" name="Book.Genre" value="@Model.Book.Genre" />
                @Html.ValidationMessageFor(model => model.Book.Genre)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Rating, new { @class = "control-label col-md-2" })
            <div class="rateit" id="rateit" name="@Model.Rating" data-rateit-value="@Model.Rating">
            </div>

            <script type="text/javascript">
                var tooltipvalues = ['Hated It', 'Didn\'t Like it', 'Liked It', 'Really Liked It', 'Loved It'];
                $("#rateit").bind('hover', function(event, value) { $(this).attr('title', tooltipvalues[value - 1]); });
            </script>
            <script type="text/javascript">
                    $('.rateit').bind('rated reset', function(e) {
                        var ri = $(this);
                        var value = ri.rateit('value');
                        var readBookId = @Model.ReadBookId;

                        $.ajax({
                            url: '/BookList/Rate/' + readBookId, //your server side script
                            data: { rating: value }, //our data
                            type: 'PUT'
                        });
                    });
            </script>
        </div>

        <div class="form-group">
                @Html.LabelFor(model => model.DateRead, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DateRead)
                    @Html.ValidationMessageFor(model => model.DateRead)
                </div>
            </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
